<template>
	<view class="content">
        <u-navbar bgColor="#fff" :fixed="true" :shadow="true" :safeAreaInsetTop="true" :placeholder="true"
            @leftClick="back" title="班组管理" rightIcon="search" @rightClick="rightClick">
        </u-navbar>

        <view class="uni-area">
            <!-- 班组统计概览 -->
            <view class="u-m-t-30 uni-shadow u-p-l-10 u-p-t-10 uni-echarts-box">
                <qiun-title-bar title="班组统计概览"/>
                <!-- 项目总数量 -->
                <view class="u-m-t-20 u-flex u-row-between u-p-l-30">
                    <text>合计</text>
                    <text>{{enterprises.total}}</text>
                </view>
                <view style="height:416rpx">
                    <qiun-data-charts type="pie"    
                        :tooltipShow="true" tooltipFormat="teamTooltip"
                        :opts="enterprises.opts"
                        :chartData="enterprises" />
                </view>
            </view>

            <!-- 班组信息 -->
            <view class="u-m-t-44 u-font-32 font-bold">班组信息</view>
            <uni-item-team class="u-m-t-40" v-for="(tem,ind) in page.list" :key="ind" :listItem="tem" />

            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop" @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore :status="page.status" />
        </view>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                // 下拉选择数据
				selectData:[],
                // 班组统计概览
                enterprises:{
                    total: 0,
                    series: [
                        // {
                        //     data: [
                        //         { feild:'sub', label:"分包企业数量", name: "分包数量", value: 0 }, 
                        //         { feild:'groups',label:"班组数",  name: "班组数", value: 0 }, 
                        //         { feild:'staffs',label:"班组人数",  name: "班组人数", value: 0 }, 
                        //     ],
                        //     format: 'yAxisDemo1', // label数据式化
                        // }
                    ],
                    opts: {
                        extra: {
                            pie: {
                                customRadius: 48,
                            }
                        }
                    }
                },
                // 分页相关参数
                paging:{
                    pageNum: 1,
                    pageSize: this.$config.pageSize,
                },
                page:{
                    scrollTop: 0,
                    status: 'nomore',
                    total: 0,
                    list: [], // 列表
                },
			}
		},

        onReady(){},

        onPageScroll(e) {
            this.page.scrollTop = e.scrollTop;
        },
        onReachBottom(){
            if( this.page.list.length < this.page.total ){
                this.paging.pageNum += 1
                this.getTeamList()
            }else{
                this.page.status = 'nomore'
            }
        },

		onLoad(option) {
            this.paging.gcbh = option.gcbh
            // 班组统计
            this.getTeamTotal()
            // 班组列表
            this.getTeamList()
		},

		methods: {
            // back
            back(){
                uni.navigateBack()
            },
            // search
            rightClick(){
                uni.navigateTo({ url: '/pages/common/search?type=team' })
            },


            // 班组统计
            getTeamTotal(){
                this.$request(this,this.$apis.teamTotal,{gcbh:this.paging.gcbh}).then(res=>{
                    // console.log('班组统计',res)
                    this.enterprises.series = [
                        {
                            data: [ 
                                { feild:'sub', label:"分包单位数量", name: "分包单位数量", value: 0 }, // 单位原为企业
                                { feild:'groups',label:"班组数",  name: "班组数", value: 0 }, 
                                { feild:'staffs',label:"班组人数",  name: "班组人数", value: 0 }, 
                            ],
                            format: 'yAxisDemo1', // label数据式化
                        }
                    ]
                    this.enterprises.series[0].data.map((v,i)=>{
                        v.name = v.name + ' ' + res[v.feild]
                        v.value = res[v.feild]
                    })
                    this.enterprises.series[0].data.map((v,i)=>{
                        this.enterprises.total += Number(v.value)
                    })
                }).then()
            },
            // 班组列表
            getTeamList(){
                this.page.status = 'loading'
                this.$request(this,this.$apis.teamList,this.paging).then(res=>{
                    // console.log('班组列表',res)
                    this.page.total = res.total
                    if( res.total && res.total != 0 ){
                        this.page.status = 'loadmore'
                        res.data.map((v,i)=>{
                            this.page.list.push(v)
                        })
                    }else{
                        this.page.status = 'nomore'
						uni.$u.toast('暂未查询到更多班组相关数据')
                    }
                }).then()
            },


            // 回到顶部
            toTop(){
                uni.pageScrollTo({ scrollTop: 0, duration: 300 })
            }
		}
	}
</script>

<style scoped lang="scss">
    // .content{}
</style>
